<!-- 营业 - 账单 - 弹窗组件 -->
<template>
  <CustomDialog v-model:visible="dialogVisible" top="2vh" curent-class="business-statement-dialog">
    <div class="dialog-title">桌台账单</div>
    <!-- 加载中的骨架屏 -->
    <div v-if="loading" class="flex-col space-y-54 section skeleton-container">
      <el-skeleton :rows="20" animated />
    </div>

    <!-- 加载完成后显示内容 -->
    <div class="flex-col space-y-54 section" v-else-if="!isEmpty(deskDetail)">
      <div class="flex-col">
        <div class="flex-row items-center justify-between group_4">
          <div class="flex-row items-center justify-between">
            <span class="text_5">{{
              orderDetail.recordInfo.desk_name || deskDetail.desk_name
            }}</span>
            <span class="font_3 text_7" v-if="orderDetail.recordInfo.region_name"
              >/{{ orderDetail.recordInfo.region_name }}</span
            >
          </div>
          <span class="font_3"
            >人数：{{ orderDetail.recordInfo.use_num || deskDetail.use_num }}人</span
          >
        </div>
        <div class="flex-row group_5 items-center justify-between">
          <span class="font_3"
            >单号：{{ orderDetail.recordInfo.order_no || deskDetail.order_id }}</span
          >
          <span class="font_3"
            >席数：{{ orderDetail.recordInfo.open_num || deskDetail.open_num || 1 }}座</span
          >
        </div>
        <div class="flex-row items-center justify-between group_4 view">
          <span class="font_3 text_13"
            >桌台金额：￥{{ orderDetail.recordInfo.record_price || '0.00' }}</span
          >
          <span class="font_3 text_12"
            >开台人：{{ orderDetail.recordInfo.clerk_name || deskDetail.clerk_name }}</span
          >
        </div>

        <!-- 会员信息 -->
        <template v-if="!isEmpty(deskDetail.user)">
          <div class="divider view_2"></div>
          <div class="flex-row group_4 view_3 items-center justify-between">
            <span class="font_3 text_15">会员：{{ deskDetail.user.real_name }}</span>
            <span class="font_3 text_16">出生日期：{{ deskDetail.user.birthday || '未知' }}</span>
          </div>
          <div class="flex-row items-center justify-between group_4 view_4">
            <span class="font_3">会员存款：￥{{ deskDetail.user.balance || '0.00' }}</span>
            <span class="font_3">会员积分：{{ deskDetail.user.points || '0' }}</span>
          </div>
        </template>

        <div class="divider view_5"></div>

        <!-- 价格信息 -->
        <div class="flex-row items-center justify-between group_9">
          <span class="font_3 text_20"
            >菜品总额：￥{{ orderDetail.priceInfo.food_price || '0.00' }}</span
          >
          <span class="font_3 text_19"
            >任点差额：￥{{ orderDetail.priceInfo.diff_price || '0.00' }}</span
          >
        </div>
        <div class="flex-row items-center justify-between group_4 view_6">
          <span class="font_3">退菜金额：￥{{ orderDetail.priceInfo.back_price || '0.00' }}</span>
          <span class="font_3"
            >赠菜金额：￥{{ orderDetail.priceInfo.present_price || '0.00' }}</span
          >
        </div>
        <div class="flex-row items-center justify-between group_4 view_7">
          <span class="font_3 text_22"
            >服务费：￥{{ orderDetail.priceInfo.service_price || '0.00' }}</span
          >
          <span class="font_3">调整尾数：￥{{ orderDetail.priceInfo.tail_price || '0.00' }}</span>
        </div>
        <div class="flex-row items-center justify-between group_4 view_8">
          <span class="font_3">调整零头：￥{{ orderDetail.priceInfo.reduce_price || '0.00' }}</span>
          <span class="font_3">本席金额：￥{{ orderDetail.priceInfo.desk_price || '0.00' }}</span>
        </div>
        <div class="flex-row items-center justify-between group_4 view_9">
          <span class="font_3">酒席席数：{{ orderDetail.priceInfo.desk_num || '0' }}</span>
          <span class="font_3">酒席金额：￥{{ orderDetail.priceInfo.feast_price || '0.00' }}</span>
        </div>
        <div class="flex-row items-center justify-between group_4 view_10">
          <span class="font_3">酒席定金：￥{{ orderDetail.priceInfo.deposit || '0.00' }}</span>
        </div>

        <div class="divider view_11"></div>

        <!-- 折扣信息 -->
        <span class="font_3 text_23"
          >不打折金额：￥{{ orderDetail.discountInfo.un_discount_money || '0.00' }}</span
        >
        <div class="flex-row items-center justify-between group_4 view_12">
          <span class="font_3"
            >打折方式：{{ orderDetail.discountInfo.discount_type || '无折扣' }}</span
          >
          <span class="font_3 text_24"
            >打折人：{{ orderDetail.discountInfo.discount_clerk || '-' }}</span
          >
        </div>
        <div class="flex-row items-center justify-between group_4 view_13">
          <span class="font_3">折扣率：{{ orderDetail.discountInfo.discount || '10' }}</span>
          <span class="font_3"
            >折扣额：{{ orderDetail.discountInfo.discount_money || '0.00' }}</span
          >
        </div>

        <div class="divider view_14"></div>

        <!-- 发票信息 -->
        <div class="flex-row justify-between group_4 view_15">
          <span class="font_3"
            >发票金额：￥{{ orderDetail.invoiceInfo.invoice_money || '0.00' }}</span
          >
          <span class="font_3"
            >应收金额：￥{{
              orderDetail.invoiceInfo.price || deskDetail.orderInfo?.pay_money || '0.00'
            }}</span
          >
        </div>

        <div class="group_10">
          <span class="font_3">账单状况：</span>
          <span class="font_3 text_25">{{ getStatusText(orderDetail.invoiceInfo.status) }}</span>
        </div>
      </div>

      <!-- 底部操作区域 -->
      <div class="flex-col space-y-24">
        <el-button class="reprint-btn" :loading="printLoading" @click="handleReprint">
          全单重打
        </el-button>
      </div>
    </div>
  </CustomDialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage, ElButton, ElSkeleton, ElSkeletonItem } from 'element-plus'
import { isEmpty } from '@/utils/toolsValidate'
import CustomDialog from '@/components/CustomDialog/Index.vue'
import { deskOrderDetail } from '@/api/desktop'
import { foodStartTicketPrint } from '@/api/food'

interface Props {
  modelValue: boolean
  deskDetail?: any
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  deskDetail: null
})

const emit = defineEmits<Emits>()

// 对话框显示状态
const dialogVisible = computed({
  get: () => props.modelValue,
  set: val => emit('update:modelValue', val)
})

// 订单详情数据
const orderDetail = ref({
  recordInfo: {},
  priceInfo: {},
  discountInfo: {},
  invoiceInfo: {}
})

// 打印加载状态
const printLoading = ref(false)

// 数据加载状态
const loading = ref(false)

// 获取账单状态文本
const getStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    0: '未结算',
    1: '结算中',
    2: '已结算'
  }
  return statusMap[status] || '未结算'
}

// 监听对话框打开状态
watch(
  () => dialogVisible.value,
  val => {
    if (val && props.deskDetail) {
      fetchOrderDetail()
    }
  },
  { immediate: true }
)

// 获取订单详情
const fetchOrderDetail = async () => {
  if (!props.deskDetail || !props.deskDetail.order_id) return

  loading.value = true

  try {
    const res = await deskOrderDetail({
      order_id: props.deskDetail.order_id
    })

    if (res.status === 200 && res.data.detail) {
      orderDetail.value = res.data.detail
    }
  } catch (error) {
    console.error('获取订单详情失败:', error)
    ElMessage.error('获取账单详情失败')
  } finally {
    loading.value = false
  }
}

// 全单重打功能
const handleReprint = async () => {
  if (props.deskDetail?.is_lock?.value === 2) {
    ElMessage.warning('账单已预结，请取消后操作！')
    return
  }

  try {
    printLoading.value = true

    const data = {
      order_id: props.deskDetail.order_id
    }

    const res = await foodStartTicketPrint(data)
    if (res.status === 200) {
      ElMessage.success('打印成功')
      emit('success')
    }
  } catch (error) {
    console.error('全单重打失败:', error)
    ElMessage.error('打印失败')
  } finally {
    printLoading.value = false
  }
}
</script>

<style scoped>
.dialog-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: #333333;
}
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-around {
  justify-content: space-around;
}

.justify-between {
  justify-content: space-between;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}
.section {
  flex-shrink: 0;
  border-radius: 20px;
  width: 546px;
  max-height: 986px;
  box-sizing: border-box;
  padding: 30px 0;
}
.space-y-54 > *:not(:first-child) {
  margin-top: 54px;
}
.group_4 {
  padding: 0 40px;
}

.text_5 {
  color: #333333;
  font-size: 22px;
  font-family: PingFang SC Bold;
  font-weight: 700;
  line-height: 16px;
}
.font_3 {
  font-size: 16px;
  font-family: PingFang SC Bold;
  line-height: 15px;
  font-weight: 700;
  color: #333333;
}
.text_7 {
  line-height: 14.5px;
}
.group_5 {
  margin-top: 19px;
  padding: 0 41px;
}

.view {
  margin-top: 15px;
}
.text_13 {
  margin-top: 4px;
}
.text_12 {
  margin-bottom: 4px;
}
.divider {
  background-color: #e2e2e2;
  height: 1px;
}
.view_2 {
  margin-top: 24px;
}
.view_3 {
  margin-top: 27px;
}

.text_15 {
  margin-bottom: 4px;
}
.text_16 {
  margin-top: 4px;
}
.view_4 {
  margin-top: 19px;
}

.view_5 {
  margin-top: 23px;
}
.group_9 {
  margin-top: 27px;
  padding: 0 40px;
  display: flex;
  align-items: center;
}

.view_6 {
  margin-top: 19px;
}
.view_7 {
  margin-top: 15px;
}

.text_22 {
  margin-top: 4px;
}
.text_21 {
  margin-bottom: 4px;
}
.view_8 {
  margin-top: 15px;
}

.view_9 {
  margin-top: 19px;
}
.view_10 {
  margin-top: 19px;
}
.view_11 {
  margin-top: 27px;
}
.font_6 {
  font-size: 18px;
  font-family: PingFang SC Bold;
  line-height: 16.5px;
  font-weight: 700;
  color: #333333;
}
.text_23 {
  margin-left: 41px;
  margin-top: 27px;
  align-self: flex-start;
  line-height: 17px;
}
.view_12 {
  margin-top: 20px;
}

.text_24 {
  line-height: 14.5px;
}
.view_13 {
  margin-top: 19px;
}

.view_14 {
  margin-top: 27px;
}
.view_15 {
  margin-top: 31px;
}

.group_10 {
  margin-left: 40px;
  margin-top: 15px;
  align-self: flex-start;
  line-height: 15px;
}
.text_25 {
  color: #730a04;
}
.space-y-24 > *:not(:first-child) {
  margin-top: 24px;
}
.reprint-btn {
  margin-right: 25px;
  align-self: flex-end;
  background-color: #ffffff;
  border-radius: 12px;
  width: 112px;
  height: 40px;
  border: solid 1px #999999;
  padding: 0;
  color: #666666;
  font-size: 16px;
  font-family: PingFang SC Regular;
}
.reprint-btn:hover {
  border-color: #7c0a03;
  color: #730a03 !important;
  background-color: #ffffff;
}
.font_4 {
  font-size: 16px;
  font-family: PingFang SC Regular;
}
</style>
<style>
.business-statement-dialog {
  max-height: unset !important;
}

.skeleton-container {
  padding: 30px;
  width: 546px;
  box-sizing: border-box;
}
</style>
